<template>
  <el-card style="width: 500px">
    <el-form :model="form" :rules="rules" ref="form" label-width="80px" size="medium">
 <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/file/upload"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="form.pic" :src="form.pic" style="width:230px" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-form-item prop="goodsName"  label="商品名称" style="width:300px">
        <el-input v-model="form.goodsName" placeholder="请输入商品名称" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item prop="status" label="商品种类" style="width:300px">
        <el-select v-model="form.status" placeholder="请选择商品状态" filterable>
        <el-option label="待处理" value="0"></el-option>
        <el-option label="上架" value="1"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item prop="goodsPice" label="商品价格" style="width:300px">
        <el-input  v-model="form.goodsPice" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="stock" label="商品库存" style="width:300px" >
        <el-input  v-model="form.stock" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save('form')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'AddGoodsView',
  data () {
    return {
      form: {
        pic: '',
        goodsName: '',
        status: '',
        stock: '',
        goodsPice: ''
      },
      rules: {
        goodsPice: [
          { required: true, message: '商品价格不能为空', trigger: 'blur' },
          { type: 'number', message: '请填写数字' }
        ],
        stock: [
          { required: true, message: '商品库存不能为空', trigger: 'blur' },
          { type: 'number', message: '请填写数字' }
        ],
        goodsName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择商品类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post('/goods/add', this.form).then(res => {
            if (res.code === '200') {
              this.$message.success('保存成功')
              this.$router.push('/home/goods')
            } else {
              this.$message.error('保存失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAvatarSuccess (res) {
      this.form.pic = res
    }
  }
}
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>
